/**
 * 样衣照片审核详情
 */
import * as React from 'react'
import { Card, Form, Table, Checkbox, Button, message } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import { post, CHECK_PHOTO } from '../../service/api'
import '../../assets/style/detail.less'

export interface Props{
  sample: any
  sampleImgs: any
  checkList: any []
  history: any
  photoChecks: any []
}


@Authentication
class CkphotoDetail extends React.Component<Props & FormComponentProps, any> {
  state = {
    checkList: [],
    allChecked: false
  }
  handleSubmit = (state: any) => {
    const { photoChecks, sample: { sampleId } } = this.props
    const { checkList } = this.state
    let PhotoModels: any [] = []
    photoChecks.map((row: any) => {
      let check = row
      if (checkList.contains(check.seqno)) {
        check.checkflag = 1
      }
      PhotoModels = [...PhotoModels, check]
    })
    post(CHECK_PHOTO, {
      PhotoModels,
      SampleIds: sampleId,
      status: state
    }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！')
        this.props.history.goBack()
      }
      else message.error(res.errMsg)
    })
  }
  handleAllChange = (flag: boolean) => {
    const { photoChecks } = this.props
    let keys: any [] = []
    let allChecked = false
    if(flag) {
      photoChecks.map((row: any) => {
        keys = [...keys, row.seqno]
      })
      allChecked = true
    }
    this.setState({
      ...this.state,
      allChecked,
      checkList: keys
    })
  } 
  handleChangeFlag = (param: any, flag: boolean) => {
    const { checkList } = this.state
    const { photoChecks } = this.props
    let allChecked = false
    let keys: any [] = []
    if(flag) {
      keys = [...checkList, param]
    }else {
      keys = checkList
      keys.remove(param)
    }
    if(photoChecks.length == keys.length) allChecked = true
    this.setState({
      ...this.state,
      allChecked,
      checkList: keys
    })
  }
  render () {
    const { checkList, allChecked } = this.state
    const { sampleImgs, sample, photoChecks } = this.props
    const canPass = () => {
      return checkList.length == photoChecks.length
    }
    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    const columns: any [] = [
      {
        title: '序号',
        dataIndex: 'seqno',
        key: 'seqno',
      },{
        title: '审核标准',
        dataIndex: 'checkinfo',
        key: 'checkinfo',
      },{
        title: <Checkbox checked={allChecked} onChange={(e: any) => {this.handleAllChange(e.target.checked)}}>是否通过</Checkbox>,
        dataIndex: 'checkflag',
        key: 'checkflag',
        render: (text: any, record: any) => {
          return <Checkbox checked={checkList.contains(record.seqno)} onChange={(e: any) => {this.handleChangeFlag(record.seqno, e.target.checked)}}/>
        }
      },{
        title: '审核不通过原因',
        dataIndex: 'reason',
        key: 'reason',
      },
    ]
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
            <Description term="供应商名称">{sample.vendername}</Description>
            <Description term="主荐款">{sample.ismain==1?"是":"否"}</Description>
            <Description term="图片上传日期">{sample.upphototime}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="审核信息">
          <Table 
            rowKey="seqno"
            columns = {columns}
            dataSource = {photoChecks}
            pagination = {false}
          />
          <div style={{textAlign:"center",marginTop:"20px"}}>
            <Button type="primary" disabled = {!canPass()} onClick={() => this.handleSubmit(1)}>通过</Button>&nbsp;
            <Button type="primary" disabled = {canPass()} onClick={() => this.handleSubmit(-1)}>不通过</Button>&nbsp;
            <Button type="primary" disabled = {!canPass()} onClick={() => this.handleSubmit(0)}>待定</Button>
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(CkphotoDetail)
